<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>1204_parent-son-生命周期(旧)</title>
</head>

<body>
  <div id="test"></div>
  <!-- react核心库 -->
  <script type="text/javascript" src="../js/react.development.js"></script>
  <!-- 用于支持react操作DOM -->
  <script type="text/javascript" src="../js/react-dom.development.js"></script>
  <!-- 用于将jsx转为js -->
  <script type="text/javascript" src="../js/babel.min.js"></script>

  <script type="text/babel">

    /**
     * 创建组件
     *  生命周期函数：生命周期钩子函数
     */
    class SuperCar extends React.Component {
      state = {carName: '第一代奔驰'}

      changeCar = () => {
        this.setState({carName: '第二代奔驰'})
      }
      
      

      /**
       * 初始化渲染，状态更新重新渲染
       */
      render() {
        
        const { carName } = this.state
        return (
          <div>
            <h2>我的父组件</h2><br />
            <button onClick={this.changeCar}>换车</button><br/>
            <SubCar carName={carName}/>
            </div>
        )
      }
    }

    class SubCar extends React.Component {
      
      
      /**
       * 组件将要接受更新props
       */
       componentWillReceiveProps(nextProps) {
        console.log('SubCar === componentWillReceiveProps', '---', nextProps);
      }
      
      /**
       * 组件将要挂载
       */
       componentWillMount() {
        console.log('SubCar === componentWillMount');
      }

      /**
       * 组件挂载完毕
       */
      componentDidMount() {
        console.log('SubCar === componentDidMount');
      }
      
      /**
       * 组件是否应该被更新
       */
      shouldComponentUpdate(nextProps, nextState) {
        console.log('SubCar === shouldComponentUpdate :', nextProps, '----', nextState);
        return true;
      }

      /**
       * 组件将要被更新之前
       */
      componentWillUpdate(nextProps, nextState) {
        console.log('SubCar === componentWillUpdate :', nextProps, '----', nextState);
      }

      /**
       * 组件将要被更新之后
       */
       componentDidUpdate(prevProps, prevState) {
        console.log('SubCar === componentDidUpdate :', prevProps, '----', prevState);
      }

      /**
       * 组件卸载之前
       */
      componentWillUnmount() {
        console.log('SubCar === componentWillUnmount');
      }

      render() {
        console.log('SubCar === render');
        return (
        <div>
          <h2>我是子组件，接收到的是{this.props['carName']}</h2>
         </div>
        )
      }
    }

    // 2.渲染虚拟DOM到页面
    ReactDOM.render(<SuperCar />, document.getElementById('test'))

  </script>
</body>

</html>